<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script type="text/javascript" src="js/vue.min.js" ></script>
	</head>
	<body>
		
		<div id="app">
			
			<p> {{ txt }} </p> 
			
			
			<!--
				指令 : v-
				点击事件的语法：v-on:click = '函数名字'
			-->
			<input type="button" v-on:click="fnChange" value="修改值" />
			
		</div>
		
	</body>
	<script type="text/javascript">
		var vm = new Vue({
			el:"#app",
			data:{
				txt:'黑马程序员'
			},
			// 方法：表示定义一个函数，把咱们定义好的函数名字写到这个里面
			methods:{
				// 在取函数的名字的时候，一般建议大家使用fn开头
				fnChange:function(){
					// 需要注意：在调用变量的时候，需要使用this进行调用
					this.txt = "传智播客"
				}
			}
		})
	</script>
</html>
